<template>
  <BeEcharts ref="wordCloudChartRef" class="chart-box" />
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { BeEcharts, useEcharts } from '@/components/basics/BeEcharts'

// 定义 props
const props = defineProps({
  chartData: {
    type: Array,
    required: false,
    default: () => []
  }
})

// state
const wordCloudChartRef = ref()
const { renderEcharts } = useEcharts(wordCloudChartRef)

// 监听数据变化重新渲染图表
watch(
  () => props.chartData,
  () => {
    renderChart()
  },
  { deep: true }
)

// 渲染图表函数
const renderChart = () => {
  renderEcharts({
    tooltip: {
      show: true,
      formatter: function (params: any) {
        return `${params.name}：${params.value}`
      }
    },
    series: [
      {
        type: 'wordCloud',
        gridSize: 10,
        sizeRange: [15, 30],
        rotationRange: [0, 0],
        left: 'left',
        top: 'center',
        width: '100%',
        height: '100%',
        right: null,
        bottom: null,
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: () => {
            const colors = [
              '#00c0ff', // 蓝青
              '#ff5e5e', // 红
              '#ffd500', // 黄
              '#30f2b3', // 青绿
              '#ffffff' // 白
            ]
            return colors[Math.floor(Math.random() * colors.length)]
          }
        },
        data: props.chartData // 使用传入的 props 数据
      }
    ] as any
  })
}

onMounted(() => {
  renderChart()
})
</script>
